<template>
  <ul class="todo-list">
    <!-- completed: 完成的类名 -->
    <li :class="{completed:obj.completed}" v-for="obj in arr" :key="obj.id">
      <div class="view">
        <input class="toggle" type="checkbox" v-model="obj.completed" @change="radiobtn(obj.id,obj.completed)"/>
        <label  v-if="!(issure===obj.id)">{{obj.title}}</label>
        <input class="editsss" type="text" name="" id="" v-model="reipt" @keyup.enter="modifyfn(obj.id)" v-else>
        <button class="edittask" @click="editfn(obj.id)">编辑</button>
        <button class="destroy" @click="deletefn(obj.id)"></button>
      </div>
    </li>
  </ul>

</template>

<script>
import axios from 'axios'
export default {
  data () {
    return {
      issure: '',
      reipt: ''
    }
  },
  props: ['arr'],
  methods: {
    deletefn (id) {
      axios({
        url: 'list/' + id,
        method: 'delete'
      })
      this.$emit('rendertask')
    },
    editfn (id) {
      this.issure = id
    },
    modifyfn (ind) {
      axios({
        url: 'list/' + ind,
        method: 'put',
        data: {
          title: this.reipt
        }
      }).then(res => { console.log(res) })
      this.$emit('rendertask')
      this.issure = ''
    },
    radiobtn (id, val) {
      axios({
        url: 'list/' + id,
        method: 'put',
        completed: val
      }).then(res => {
        console.log(res)
      })
    }
  }
}
</script>
<style scoped>
.edittask {
  background-color: red;
  position: absolute;
  top: 10px;
  right: 90px;
  font-size: 20px;
}
.editsss{
  width: 500px;
  height: 50px;
  background-color: pink;

}

</style>
